<script setup>
import { ref } from 'vue'

const services = ref([
  {
    title: '网站设计',
    description: '创建现代化、响应式的网站设计，确保在所有设备上都有完美的用户体验',
    icon: '🎨',
    features: ['响应式设计', '用户体验优化', '品牌一致性', '移动优先']
  },
  {
    title: '前端开发',
    description: '使用最新的前端技术栈构建高性能、可扩展的Web应用',
    icon: '💻',
    features: ['Vue.js/React', 'TypeScript', '性能优化', '代码质量保证']
  },
  {
    title: '电商解决方案',
    description: '完整的电子商务平台开发，包括购物车、支付集成和库存管理',
    icon: '🛒',
    features: ['在线商店', '支付集成', '库存管理', '订单跟踪']
  },
  {
    title: 'SEO优化',
    description: '提高网站在搜索引擎中的排名，增加有机流量和在线可见性',
    icon: '📈',
    features: ['关键词优化', '页面速度优化', '移动优化', '内容策略']
  },
  {
    title: '网站维护',
    description: '提供持续的网站维护和支持服务，确保网站安全稳定运行',
    icon: '🔧',
    features: ['安全更新', '性能监控', '备份服务', '技术支持']
  },
  {
    title: '品牌设计',
    description: '创建独特的品牌标识和视觉系统，提升品牌认知度和市场竞争力',
    icon: '🏷️',
    features: ['Logo设计', '品牌指南', '视觉识别', '营销材料']
  }
])

const process = ref([
  {
    step: '01',
    title: '需求分析',
    description: '深入了解您的业务需求和目标'
  },
  {
    step: '02',
    title: '设计方案',
    description: '创建符合需求的设计概念和原型'
  },
  {
    step: '03',
    title: '开发实施',
    description: '使用最佳实践进行开发和编码'
  },
  {
    step: '04',
    title: '测试优化',
    description: '全面测试确保质量和性能'
  },
  {
    step: '05',
    title: '上线部署',
    description: '将项目部署到生产环境'
  },
  {
    step: '06',
    title: '持续支持',
    description: '提供持续的技术支持和维护'
  }
])
</script>

<template>
  <div class="services">
    <!-- Hero Section -->
    <section class="services-hero">
      <div class="container">
        <div class="services-hero-content">
          <h1>我们的服务</h1>
          <p>提供全方位的数字解决方案，助力您的业务成功</p>
        </div>
      </div>
    </section>

    <!-- Services Grid -->
    <section class="services-grid-section">
      <div class="container">
        <div class="services-grid">
          <div v-for="service in services" :key="service.title" class="service-card">
            <div class="service-icon">{{ service.icon }}</div>
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <ul class="service-features">
              <li v-for="feature in service.features" :key="feature">
                {{ feature }}
              </li>
            </ul>
            <button class="btn btn-primary">了解更多</button>
          </div>
        </div>
      </div>
    </section>

    <!-- Process Section -->
    <section class="process">
      <div class="container">
        <div class="section-header">
          <h2>我们的流程</h2>
          <p>从概念到完成，我们遵循经过验证的6步流程</p>
        </div>
        <div class="process-timeline">
          <div v-for="step in process" :key="step.step" class="process-step">
            <div class="step-number">{{ step.step }}</div>
            <h3>{{ step.title }}</h3>
            <p>{{ step.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta">
      <div class="container">
        <div class="cta-content">
          <h2>准备开始您的项目？</h2>
          <p>联系我们讨论您的需求，获取免费的项目咨询</p>
          <button class="btn btn-primary btn-large">立即咨询</button>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.services {
  overflow-x: hidden;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4rem;
}

/* Hero Section */
.services-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 120px 0 80px;
  text-align: center;
}

.services-hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.services-hero-content p {
  font-size: 1.5rem;
  opacity: 0.9;
}

/* Services Grid */
.services-grid-section {
  padding: 100px 0;
  background: white;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.service-card {
  background: #f7fafc;
  border-radius: 1rem;
  padding: 2.5rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.service-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1a202c;
}

.service-card p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-features {
  list-style: none;
  margin-bottom: 2rem;
}

.service-features li {
  color: #718096;
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
}

.service-features li::before {
  content: '✓';
  color: #667eea;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.btn {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: #667eea;
  color: white;
}

.btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.btn-large {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

/* Process Section */
.process {
  padding: 100px 0;
  background: #f7fafc;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a202c;
}

.section-header p {
  font-size: 1.25rem;
  color: #718096;
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
}

.process-step {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}

.process-step h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1a202c;
}

.process-step p {
  color: #718096;
  line-height: 1.6;
}

/* CTA Section */
.cta {
  padding: 100px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .services-hero-content h1,
  .section-header h2 {
    font-size: 2rem;
  }
  
  .services-hero-content p,
  .section-header p {
    font-size: 1.25rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .process-timeline {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .services-hero {
    padding: 80px 0 60px;
  }
  
  .service-card {
    padding: 2rem;
  }
}
</style>